<template>
  <!--pdf转word-->
  <div class="box">
    <el-upload
      ref="uploadPdf"
      class="upload-pdf-to-word"
      drag
      action="#"
      accept=".pdf"
      :on-preview="handlePreview"
      :on-remove="handleRemoveFiles"
      :on-change="fileListChange"
      :on-exceed="handleExceed"
      :auto-upload="false"
      :limit="1"
      :file-list="fileUploadPdfList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击此处</em></div>
      <div class="el-upload__tip">
        <div>{{elUploadTip}}</div>
      </div>
    </el-upload>
    <el-button style="margin-left:10px" type="text" @click="importPdfInfoClick">上传文件</el-button>
  </div>
</template>

<script>
  import {importPdfHandle,downloadFile} from "../../../../api/studyCase/pdfConvert"
  export default {
    name: "fileUploadPdfToOther",
    props: {
      elUploadTip: {
        type: String,
        required: true,
      },
      elUploadType: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        fileUploadPdfList: [],
      }
    },
    methods: {
      /**
       * 点击文件列表中已上传的文件时的钩子  function(file)
       * @param file
       */
      handlePreview(file) {
        console.log("文件列表中已上传的文件---->该文件名称", file);
      },
      /**
       * 文件列表移除文件时的钩子  function(file, fileList)
       * @param file 删除的文件
       * @param fileList 剩下的文件
       */
      handleRemoveFiles(file, fileList) {
        /*      console.log("删除的文件信息~~", file)
                console.log("剩下的文件信息~~", fileList)*/
        this.fileUploadPdfList = fileList;
      },
      /**
       * 件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用  function(file, fileList)
       * @param file
       * @param fileList
       */
      fileListChange(file, fileList) {
        // :auto-upload="false"所以  :before-upload 无法生效，要在on-change里面写文件类型判断，也可以在这里面判断文件大小
        //获取上传的文件的后缀
        const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
        //白名单
        const whiteList = ["pdf"];
        //判断是否在白名单内
        if (whiteList.indexOf(fileSuffix) === -1) {
          this.$message({
            message: '上传文件只能是pdf',
            type: 'error'
          });
          //如果原来没有数据，制空，目的不要让其显示在file-list上面
          if (this.fileUploadPdfList.length === 0) {
            this.fileUploadPdfList = []
          } else {
            //如果再选文件时候，前面的文件格式正确，后面上传的格式不正确
            this.fileUploadPdfList = fileList.slice(0, fileList.length - 1)
          }
          return false;
        }
        //没有文件类型错误，直接赋值
        this.fileUploadPdfList = fileList;

      },
      /**
       * 文件超出个数限制时的钩子  function(files, fileList)
       * @param files
       * @param fileList
       */
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      /*上传pdf文件进行转换*/
      importPdfInfoClick() {
        if (this.fileUploadPdfList.length == 0) {
          this.$message({
            message: '请先上传文件',
            type: 'warning'
          });
          return
        }
        const formData = new FormData();
        this.fileUploadPdfList.forEach((item) => {
          formData.append("file", item.raw);
        });

        if (this.elUploadType == '1') {
          console.log("上传测试", this.elUploadType)
        }
        if (this.elUploadType == '2') {
          console.log("上传测试", this.elUploadType)
        }
        if (this.elUploadType == '3') {
          console.log("上传测试", this.elUploadType)
        }
        if (this.elUploadType == '4') {
          console.log("上传测试", this.elUploadType)
        }
        if (this.elUploadType == '5') {
          console.log("上传测试", this.elUploadType)
        }
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-upload {
    width: 100%;
  }

  /deep/ .el-upload .el-upload-dragger {
    width: 100%;
  }

  .el-upload__tip {
    color: red;
    font-size: 18px;
  }
</style>
